<template>
    <div id="chart" style="margin: 50px 0 0 50px; width: 600px; height: 400px;"></div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    name: 'TuBuaoView',
    mounted() {
        this.$nextTick(() => {
            this.initChart();
        });
    },
    methods: {
        initChart() {
            const chart = echarts.init(document.getElementById('chart'));
            const option = {
                title: {
                    text: 'World Population'
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'shadow'
                    }
                },
                legend: {},
                grid: {
                    left: '3%',
                    right: '4%',
                    bottom: '15%',  // 增加底部边距，为x轴标签留出空间
                    containLabel: true
                },
                xAxis: {  // x轴改为类目轴
                    type: 'category',
                    data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
                },
                yAxis: {  // y轴改为数值轴
                    type: 'value',
                    boundaryGap: [0, 0.01]
                },
                series: [
                    {
                        name: '2011',
                        type: 'bar',
                        data: [18203, 23489, 29034, 104970, 131744, 630230]
                    },
                    {
                        name: '2012',
                        type: 'bar',
                        data: [19325, 23438, 31000, 121594, 134141, 681807]
                    }
                ]
            };
            chart.setOption(option);
        }
    }
};
</script>